{% extends "user/base.html" %}

{% block user_content %}

{% if orders|length == 0 %}

<div class="container">
    <div class="alert alert-success" role="alert">
        您还没有订单哦！
    </div>
</div>

{% else %}

<!-- container table-responsive -->
<!-- table rounded table-striped table-hover table-bordered -->
<div class="container table-responsive">
    <table class="table table-bordered table-striped table-hover" id="orderTable">
        <thead>
            <tr>
                <th class="text-center">详单编号</th>
                <th class="text-center">生成时间</th>
                <th class="text-center">充电桩编号</th>
                <th class="text-center">充电电量</th>
                <th class="text-center">充电时长</th>
                <th class="text-center">启动时间</th>
                <th class="text-center">停止时间</th>
                <th class="text-center">充电费用</th>
                <th class="text-center">服务费用</th>
                <th class="text-center">总费用</th>
            </tr>
        </thead>
        <tbody>
            {% for order in orders %}
            <tr>
                <td>{{ order.bill_id }}</td>
                <td>{{ order.bill_time }}</td>
                <td>{{ order.charging_pile_id }}</td>
                <td>{{ order.charging_quantity }}</td>
                <td>{{ order.charging_duration }}</td>
                <td>{{ order.starting_time }}</td>
                <td>{{ order.stopping_time }}</td>
                <td>{{ order.charging_cost }}</td>
                <td>{{ order.service_cost }}</td>
                <td>{{ order.total_cost }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<link rel="stylesheet" href="{{ url_for('static', filename='css/dataTables.bootstrap5.min.css') }}">
<script src="{{ url_for('static', filename='scripts/jquery.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', filename='scripts/dataTables.bootstrap5.min.js') }}"></script>

<script>
    $(document).ready(function () {
        $('#orderTable').DataTable({
            pagination: true, // false to disable pagination (or any other option)
            pagingType: 'simple_numbers',
            searching: false,  // turn off search
            aaSorting: [[1, 'dec']],  // Sort by first column in DEC
            // iDisplayLength: 15,  // record number per page

            language: {
                sInfo: '显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项',
                sLengthMenu: '每页显示 _MENU_ 项',
                oPaginate: {
                    sFirst: "第一页",
                    sPrevious: "上一页",
                    sNext: "下一页",
                    sLast: "最后一页"
                }
            }
        });
        $('.dataTables_length').addClass('bs-select');
    });

</script>

{% endif %}

{% endblock %}